<template>
	<div class="goods-size">
		<div class="tables">
			<div v-for="(item,index) in tables" class="table-item">
				<span v-for="item in tables[index]">{{item}}</span>
			</div>
		</div>
		<div class="set">
			<div v-for="(item) in set" class="set-item">
				<span class="key">{{item.key}}</span>
				<span class="value">{{item.value}}</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name:'GoodsSize',
		props:{
			goodsSize:Object
		},
		data(){
			return {
				tables:[],
				set:[]
			}
		},
		watch:{
			goodsSize(){
				this.tables = this.goodsSize.rule.tables[0];
				this.set = this.goodsSize.info.set;
			}
		}
	}
</script>

<style scoped>
	.goods-size {
		font-size: 0.373333rem;
		padding: 10px;
	}
	.tables,.set{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.table-item,.set-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: left;
		width: 100%;
		padding: 10px 0;
		padding-right: 0.4rem;
		border-bottom: 1px solid #ccc;
	}
	.table-item span {
		flex: 1;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.set-item {
		justify-content: left;
		padding: 0.4rem 0;
	}
	.key{
		width: 30%;
	}
	.value{
		flex: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: hotpink;
	}
</style>
